<template>
    <div class="search">
        <form action="">
            <span class="iconfont img">&#xe62b;</span>
            <input type="text" v-model="keyword" placeholder="搜索商品/店铺/品牌">
            <span class="iconfont close" v-show="ok" @click="close">&#xe641;</span>
        </form>
    </div>
</template>

<script>
export default {
    name:"SearchHeader",
    data(){
        return {
            keyword:"",
            ok:false
        }
    },
    watch:{
        keyword(){
            if(!this.keyword==""){
                this.ok = true
            }else{
                this.ok = false
            }
        }
    },
    methods:{
        close(){
            this.keyword = ""
        }
    }
}
</script>

<style lang="stylus" scoped>
.search
    width 3.75rem
    height 0.44rem
    background-color rgba(0,0,0,.85)
    border-top:1px solid transparent
    border-bottom:1px solid transparent
    form 
        position relative
        height 0.34rem
        margin-top 0.05rem
        margin-left 0.05rem
        input 
            width: 3.05rem;
            height: 0.34rem;
            padding: 0 0.3rem;
            line-height: 0.34rem;
        .img
            position absolute
            top 0
            left 0.05rem
            line-height 0.34rem
            font-size 0.2rem
            color #dbdbdb
        .close
            position absolute
            top 0
            right 0.1rem
            line-height 0.34rem
            font-size 0.2rem
            color #dbdbdb   
</style>

